<template>
    <div class="box-column">
        <ux-header-search
            ref="searchHeader"
            v-bind="enquiryData"
            :isCheckPermissions="false"
            @search="onQueryClick"
        ></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid
                v-bind="tableConfig"
                :data="dataStore.data"
                :columns="table.columns"
            >
                <template v-slot:operate="{ row }">
                    <ux-btn-group
                        :btns="table.btns"
                        :data="{ row, permissionsData }"
                    ></ux-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page"
                :page-size="dataStore.proxy.pageSize"
                :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total"
                :layout="'total, sizes, prev, pager, next, jumper'"
            ></el-pagination>
        </div>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, State } from "vuex-class";
import { mixinTableStore } from "@/mixin/table/Store";
import { mixinTableHeader } from "@/mixin/table/Header";
import { mixinTime } from "@/mixin/Time";
import moment from 'moment';
@Component({
    mixins: [mixinTableStore, mixinTableHeader, mixinTime]
})
export default class parkTenantLogTable extends Vue {
    @Action("kqLog/dayList") getList: any;
    @State((state) => state.sharing.dayData) dayDataData: any;
    table: any = {
        // 列配置
        columns: [
            {
                width: 70,
                type: "seq",
                title: "序号"
            },
            {
                title: "日期",
                field: "dk_day"
            },
            {
                title: "星期",
                field: "week_day",
                params: 'dayDataData',
                formatter: (this as any).formatterData
            },
            {
                title: "姓名",
                field: "user_xm"
            },
            {
                title: "部门",
                field: "section_name"
            },
            {
                title: "应打卡次数",
                field: "dk_num"
            },
            {
                title: "早班上班卡",
                field: "dk01_in_time"
            },
            {
                title: "早班下班卡",
                field: "dk01_out_time"
            },
            {
                title: "中班上班卡",
                field: "dk02_in_time"
            },
            {
                title: "中班下班卡",
                field: "dk02_out_time"
            },
            {
                title: "晚班上班卡",
                field: "dk03_in_time"
            },
            {
                title: "晚班下班卡",
                field: "dk03_out_time"
            }
        ]
    };

    // 查询头配置
    enquiryData: any = {
        fields: [
            {
                field: 'section_name',
                label: '部门'
            },
            {
                field: "user_xm",
                label: "姓名"
            },
            {
                fieldType: 'daterange',
                field: 'time',
                label: '日期范围',
                type: 'daterange',
                format: 'yyyy-MM-dd',
                pickerOptions: {
                    disabledDate: (time: any) => {
                        const date = time.getTime();
                        return !(
                            date < moment().subtract(0, 'day') &&
                            date > moment().subtract(+12, 'months')
                        );
                    }
                }
            }
        ],
        valueTransform: [
            {
                field: "time",
                // 对应DatePicker时间范围组件
                fields: ["start_time", "end_time"]
            }
        ]
    };
    timeOptionRange: any = null;
}
</script>

